<script lang="js" setup>
import {NPagination} from "naive-ui";

const props = defineProps({
  post_id: {
    type: [String, Number],
    required: true
  }
})


const page = ref(1);
const limit = ref(5);


const {
  total,
  rows,
  pending,
  error,
  refresh,
} = await usePage(() => {
  return usePostCommentApi(() => {
    return {
      page: page.value,
      limit: limit.value,
      post_id: props.post_id
    }
  })
});

const handlePageChange = (p) => {
  page.value = p;
  refresh();
}

defineExpose({
  handlePageChange
})
</script>

<template>
  <div>
    <div class="px-5 pb-5">
      精彩评论
    </div>

    <LoadingGroup :error="error" :is-empty="rows.length === 0" :pending="pending">
      <CommentList v-for="(item,index) in  rows" :key="index" :item="item">
        <CommentList v-for="(item2,index2) in item.post_comments" :key="index2" :item="item2"></CommentList>
      </CommentList>

      <div class="flex justify-center items-center mt-5 mb-10">
        <n-pagination
            :item-count="total"
            :on-update:page="handlePageChange"
            :page="page"
            :page-size="limit"
            size="large"
        />
      </div>
    </LoadingGroup>
  </div>
</template>

<style scoped>

</style>
